<template>
    <lay-out
    :header-image-url="url"
    :page-tag="{
      type:'001',
      number:'440892818892837'
    }">
        <!-- 轮播图 -->
        <div style="height:45vh">
          <ztSwiper :swiperList="scrollUrl" :xyd="xyd" :personFile="true" :showPagi="true" @handleSwipeChange="getIndex">
          </ztSwiper>
        </div>
        

        <!-- 个人标签 -->
        <div class="out-tag">
          <tag-could v-show="showTag" :data="tags"></tag-could>
          <div class="icon iconfont icon-guanbi close" style="fontSize:1.8rem" @click="closeTag" v-show="showTag"></div>
          <div class="div-span" v-show="!showTag">
            <span class="span-tag" v-show="index < 5" v-for="(item,index) in tags" :key="item.id">{{item.name}}</span>
            <span class="icon iconfont icon-dextrad tag-jiantou" @click="showTags"></span>
          </div>
        </div>

        <!-- 最新动态 -->
        <div class="news">
            <div class="newleft">
              <span class="newPoin"></span>
              <div class="more">最新动态</div>
            </div>
            <div class="newRight">
              <div class="rightWidth" v-for="(item,index) in news" :key="index">
                <mt-button class="type" size="small" style="color:#FFFFFF">{{item.type}}</mt-button>
                <p class='ellipsis block'>{{item.content}}</p>
              </div>
            </div>
        </div>

        <!-- 个人信息 -->
        <div class="datas" title="基本">
          <div>
            <div class="data">
              <span class="key">姓名 ：</span><span class="value">{{base.xm}}</span>
              <span class="key keys">性别 ：</span><span class="value">{{base.xb}}</span>
            </div>
            <div class="data">
              <span class="key">出生日期 ：</span><span class="value">{{base.csrq}}</span>
            </div>
            <div class="data">
              <span class="key">身份证号 ：</span><span class="value link">{{base.sfzh}}</span>
            </div>
            <div class="data">
              <span class="key">户籍地 ：</span><span class="value">{{base.hjd}}</span>
            </div>
            <div class="data">
              <span class="key">工作单位 ：</span><span class="value">{{base.gzdw}}</span>
            </div>
            <div class="data">
              <span class="size indent">	现住址 ：</span><span class="value">{{base.addr}}</span>
            </div>
            <div class="hidden" v-show="showMore">
              <p class="checkMore" @click="checkMore">查看更多<span class="icon iconfont icon-down-trangle" style="margin-left:1rem"></span></p>
            </div>
          </div>
          <div v-show="showData">
            <div class="data">
              <span class="key">民族 ：</span><span class="value">{{base.mz}}</span>
              <span class="key keys">婚姻 ：</span><span class="value">{{base.sfyh === '1'?'已婚':'未婚'}}</span>
            </div>
            <div class="data" v-if="base.sfyh === '1'">
              <span class="key">配偶 ：</span><span class="value">{{base.po_xm}}</span>
            </div>
            <div class="data">
              <span class="key">国籍 ：</span><span class="value">{{base.gj}}</span>
              <span class="key keys">籍贯 ：</span><span class="value">{{base.jg}}</span>
            </div>
            <div class="data">
              <span class="key">政治面貌 ：</span><span class="value">{{base.zzmm}}</span>
              <span class="key keys">宗教信仰 ：</span><span class="value">{{base.zjxy}}</span>
            </div>
            <div class="data">
              <span class="key">学历 ：</span><span class="value">{{base.xl}}</span>
              <span class="key keys">职业 ：</span><span class="value">{{base.zy}}</span>
            </div>
            <div class="data">
              <span class="key">专长 ：</span><span class="value">{{base.zc}}</span>
            </div>
            <div class="data">
              <span class="key">体貌 ：</span><span class="value">{{base.tm}}</span>
            </div>
            <div class="data">
              <span class="key">身高/体重/足长 ：</span><span class="value">{{base.sgtzzc}}</span>
            </div>
            <div class="data indent">
              <span class="size">	其他证件 ：</span><span class="value  link" v-for=" item in base.qtzj" :key="item.zjhm">{{item.zjhm}}({{item.zjmc}})&nbsp;&nbsp;&nbsp;</span>
            </div>
            <div class="hidden">
              <p class="checkMore" @click="up">收起<span class="icon iconfont icon-arrow-up" style="margin-left:1rem"></span></p>
            </div>
          </div>
        </div>

       <!-- 通讯、虚拟、交易、资产、企业 -->
        <div class="txjzq">
          <details-group title="通讯方式" :titleBorder="true">
	       	  <div class="data">
	            <span class="size">	手机号 ：</span>
              <span v-for="(item,index) in txfs.sjhArr" :key="index" class="p-data">
                <span v-init-tooltips="{
                  tableName: item.tableName,
                  systemid: item.systemid,
                  bsh: item.sjh,
                  bshlx: '004',
                  dalx: 'RY'
                }" :class="[index == 0 ? 'value link' : 'value link phone-indent']">{{item.sjh}}</span>
                <p class="text-indent value">{{item.dzsj}}</p>
              </span>
	          </div>
	       	  <div class="data">
	            <span class="size">	邮箱 ：</span><span :class="[index == 0 ? 'value' : 'value email-indent']" v-for="(item,index) in txfs.email" :key="index">{{item}}<br></span>
	          </div>
	       	  <div class="data">
	            <span class="size">	移动终端 ：</span><span :class="[index == 0 ? 'value' : 'value move-indent']" v-for="(item,index) in txfs.ydzd" :key="index">{{item}}<br></span>
	          </div>
          </details-group>

          <details-group title="虚拟账号" :titleBorder="true">
	       	  <div class="data">
	            <span class="size">	微信号 ：</span><span :class="[index == 0 ? 'value link' : 'value link phone-indent']" v-for="(item,index) in xnzh.wxhArr" :key="index">{{item.wxh}}({{ item.zxhdsj}})<br></span>
	          </div>
	       	  <div class="data" v-if="xnzh.zfbArr">
	            <span class="size">	支付宝 ：</span><span :class="[index == 0 ? 'value' : 'value zfb-indent']" v-for="(item,index) in xnzh.zfbArr" :key="index">{{item.zfb}}({{item.zxhdsj}})<br></span>
	          </div>
	       	  <div class="data">
	            <span class="size">	qq ：</span><span v-init-tooltips="{
                  tableName: item.tableName,
                  systemid: item.systemid,
                  bshlx: '005',
                  bsh: item.qq,
                  dalx: 'RY'
                }" :class="[index == 0 ? 'value link' : 'value link qq-indent']" v-for="(item,index) in xnzh.qqArr" :key="index">{{item.qq}}({{item.zxhdsj}})<br></span>
	          </div>
	       	  <div class="data">
	            <span class="size">	Q群 ：</span><span :class="[index == 0 ? 'value' : 'value qqq-indent']" v-for="(item,index) in xnzh.qqGroupArr" :key="index">{{item.qqGroup}}({{item.zxhdsj}})<br></span>
	          </div>
          </details-group>

          <details-group title="交易账号" :titleBorder="true">
	       	  <div class="data">
	            <span class="size">	银行账号 ：</span><span class="value" v-for="(item,index) in jyzh.yhzh" :key="index">{{item.title}}&nbsp;&nbsp;</span>
	          </div>
	       	  <div class="data">
	            <span class="size">	股票账号 ：</span><span class="value" v-for="(item,index) in jyzh.gpzh" :key="index">{{item.zhm}}&nbsp;&nbsp;&nbsp;</span>
	          </div>
          </details-group>
	        
          <details-group title="资产" :titleBorder="true">
	       	  <div class="data">
	            <span class="size">	车辆 ：</span>
              <span  v-for="(item,index) in zc.cl" :key="index">
                <span class="value">{{item.ppmc}}&nbsp;</span>
                <span v-init-tooltips="{
                  tableName: item.tableName,
                  systemid: item.systemid,
                  bshlx: '003',
                  bsh: item.cph,
                  dalx: 'RY'
                }" class="value link">{{ item.cph}}&nbsp;&nbsp;&nbsp;</span>
              </span>
	          </div>
	       	  <div class="data">
	            <span class="size">	房产 ：</span><span class="value" v-for="(item,index) in zc.fc" :key="index">{{item.dzmc}}&nbsp;&nbsp;&nbsp;</span>
	          </div>
	       	  <div class="data" v-if="zc.bx">
	            <span class="size">	保险 ：</span><span class="value" v-for="(item,index) in zc.bx" :key="index">{{item}}&nbsp;&nbsp;&nbsp;</span>
	          </div>
          </details-group>
          
          <details-group title="企业" :titleBorder="true">
	       	  <div v-for="(item,index) in qy" :key="index">
	       	    <div class="data">
	              <span>企业名称 ：</span><span class="value" >{{item.qymc}}</span>
	            </div>
	       	    <div class="data">
	              <span>企业地址 ：</span><span class="value" >{{item.qydz}}</span>
	            </div>
	       	    <div class="data">
	              <span>法人代表 ：</span><span class="value" >{{item.frdb}}</span>
	            </div>
	            <br>
	          </div>
          </details-group>
        </div>

        <!-- 前科劣迹 -->
        <div class="qklj"  title="前科">
  	      <block-header icon="../../../static/icon/record.png" title="前科劣迹" number=""></block-header>	      
          <details-group :title="item.flmc" :titleBorder="true" v-for="(item,index) in qklj" :key="`qklj_${index}`">
    	        <div v-for="(item1,indexs) in item.data" :key="`qklj_${indexs}`" @click="goToQkljDetail(index,indexs)">
  	       	    <div class="data" v-for="(item2,indexss) in item1.rowArr" :key="`qklj_${indexss}`">
  	              <span>{{item2.col_cn}} ：</span><span @click.stop :class="[indexss == 0 && index == 0 ? 'value link' : 'value']" v-init-tooltips="(indexss == 0 && index == 0) ? {
                    tableName: item1.tableName,
                    systemid: item1.systemid,
                    bshlx: '002',
                    bsh: item2.col_val,
                    dalx: 'RY'
                } : null">{{item2.col_val}}</span>
  	            </div>
  	            <br>
  	          </div>
  	      </details-group>
        </div>

		    <!-- 行为 -->
        <div class="xw"  title="行为">
	      	<block-header icon="../../../static/icon/behavior.png" title="行为" number=""></block-header>
          <details-group :title="item.flmc" :titleBorder="true" v-for="(item,index) in xw" :key="`xw_${index}`">
  	        <div @click="goToXwDetail(index,indexs)" v-for="(item1,indexs) in item.data" :key="`xw_${indexs}`">
	       	    <div class="data" >
	              <span class="deep" v-for="(item2,indexss) in item1.rowArr" :key="`xw_${indexss}`">{{item2.col_val}}&nbsp;&nbsp;&nbsp;</span>
	            </div>
	          </div>
          </details-group>
          <br>
	      </div>

        <div title="关系">
          <!-- 家庭关系 -->
          <relative-list :data="homeDetail"></relative-list>
          <!-- 社会关系 -->
          <social-list :data="socialDetail"></social-list>
        </div>

        <!-- 轨迹 -->
    		<div class="guiji" title="轨迹">
          <track-list :trackData="trackData" @axisClick="clickIndex">
          <details-group title="多次伴随" :titleBorder="true" slot="title">
          </details-group>
            <swiper slot="image" :data="dcbs" @getImgIndex="getImgIndex"></swiper>
          </track-list>
      	</div>

        <!-- 其他线索 -->
    	  <div class="xianshuo" title="其他">
    		  <block-header icon="../../../static/icon/other.png" title="其他线索"></block-header>
      		<div>
            <mt-button v-for="(item,index) in qtxs" :key="index" type="primary" class="mui-btn gj-button" @click="getOtherIndex(index)">{{item.tableName_cn}}({{item.total}})</mt-button>
      		</div>
    	  </div>

    </lay-out>
</template>
<script>
  import { mapActions } from 'vuex'
  import layOut from '../../components/lay-out'
  import BlockHeader from '../../components/block-header'
  import detailsGroup from '../../components/details-group'
  import trackList from './track'
  import swiper from './swiper'
  import relativeList from './relative-list'
  import socialList from './social-list'
  import tagCould from '../../components/could'
  import ztSwiper from '../../components/zt-swiper'
  import request from '../../helper/request'
  import {BASE64_TYPE} from '@/config'

  export default {
    data() {
      return {
        chart: null,
        showData: false,
        showMore: true,
        showTag: true,
        index: 0,
        url: '',
        // 轮播图
        scrollUrl: [],
        // 嫌疑度
        xyd: '',
        // 标签
        tagArray: [],
        // 标签
        tags: [
          {'name': '吸毒', 'value': '001'}
        ],
        // 最新消息
        news: [],
        // 基本信息
        base: {},
        // 通讯方式等
        txfs: {},
        xnzh: {},
        jyzh: {},
        zc: {},
        qy: {},
        // 前科劣迹
        qklj: [],
        // 行为
        xw: [],
        // 关系
        homeDetail: {},
        socialDetail: {},
        // 多次伴随img
        dcbs: [],
        // 其他线索
        qtxs: [],
        trackData: []
      }
    },
    components: {
      layOut,
      BlockHeader,
      trackList,
      relativeList,
      socialList,
      tagCould,
      swiper,
      detailsGroup,
      ztSwiper
    },
    methods: {
      // 标签云数据处理
      createData() {
        this.tags = this.tagArray.map(item => {
          return {
            name: item.name,
            value: item.id
          }
        })
      },
      checkMore() {
        this.showData = true;
        this.showMore = false;
      },
      up() {
        this.showData = false;
        this.showMore = true;
      },
      closeTag() {
        this.showTag = false
      },
      showTags() {
        this.showTag = true
      },
      getIndex(index) {
        this.index = index
      },
      clickIndex(event, item, index, targetNode) {
        this.gettraceDetail(this.trackData[index])
      },
      getImgIndex(index) {
        this.getaccompanyData(this.dcbs[index])
      },
      getOtherIndex(index) {
        this.getotherDetail(this.qtxs[index])
        this.getotherFlag('1')
        this.$router.push('detail')
      },
      /**
       * 跳转到前科详情
       */
      goToQkljDetail(index, indexs) {
        this.getotherDetail(this.qklj[index])
        this.getotherFlag('1')
        this.$router.push('detail?page=' + (indexs + 1))
      },
      /**
       * 跳转到行为详情
       */
      goToXwDetail(index, indexs) {
        this.getotherDetail(this.xw[index])
        this.getotherFlag('1')
        this.$router.push('detail?page=' + (indexs + 1))
      },
      // 照片、标签、最新动态
      async getZbz() {
        let zbz = await request('people/zbz', 'SC0401', {sfzh: '000000'})
        // 轮播图
        this.scrollUrl = zbz.pic.map(resLD => {
          return {
            name: resLD.name,
            xp: resLD.xp ? `${BASE64_TYPE}${resLD.xp}` : '/static/default/head.png'
          }
        })
        // 小图
        this.url = zbz.pic[0].xp ? `${BASE64_TYPE}${zbz.pic[0].xp}` : '/static/default/head.png'
        // 嫌疑度
        this.xyd = zbz.xyd
        // 标签
        this.tagArray = zbz.bq
        this.createData()
        // 最新动态
        this.news = zbz.zxdt
        this.getImage(zbz.pic[0].xp)
      },
      // 基本信息
      async getBase() {
        let base = await request('people/jbxx', 'SC0401', {sfzh: '000000'})
        // 轮播图
        this.base = base
        this.base.addr = base.xzz[0].addr
        this.getName(base.xm)
      },
      // 通讯、虚拟、交易、资产、企业
      async getTxjzq() {
        let txjzq = await request('people/txjzq', 'SC0403', {sfzh: '000000'})
        this.txfs = txjzq.txfs
        this.xnzh = txjzq.xnzh
        this.jyzh = txjzq.jyzh
        this.zc = txjzq.zc
        this.qy = txjzq.qy
      },
      // 前科劣迹
      async getQklj() {
        let qklj = await request('people/qklj', 'SC0404', {sfzh: '000000'})
        this.qklj = qklj.qklj
      },
      // 行为
      async getBehavior() {
        let behavior = await request('people/xw', 'SC0405', {sfzh: '000000'})
        this.xw = behavior.xw
      },
      // 家庭
      async getRelative() {
        let relative = await request('people/gxqs', 'SC0406', {sfzh: '000000'})
        this.homeDetail = relative
        this.gethomeDetail(relative)
      },
      // 社会
      async getSocial() {
        let social = await request('people/gxsh', 'SC0407', {sfzh: '000000'})
        this.socialDetail = social
        this.getfriendDetail(social)
      },
      // 轨迹多次
      async getAlway() {
        let alway = await request('people/gj_all', 'SC040800', {sfzh: '000000'})
        this.trackData = alway.gjArr
      },
      // 轨迹多次伴随img
      async getImg() {
        let imgArr = await request('people/gu_dcbs', 'SC0408', {sfzh: '000000'})
        this.dcbs = imgArr.dcbs
        this.getaccompanyData(imgArr.dcbs)
      },
      // 其他线索
      async getOther() {
        let other = await request('people/qtxs', 'SC0409', {sfzh: '000000'})
        this.qtxs = other.tableArr
        this.getotherDetail(other.tableArr)
        this.getotherFlag('1')
      },
      ...mapActions('personStore', {
        gethomeDetail: 'gethomeDetail',
        getfriendDetail: 'getfriendDetail',
        getaccompanyData: 'getaccompanyData',
        gettraceDetail: 'gettraceDetail',
        getotherDetail: 'getotherDetail',
        getName: 'getName',
        getImage: 'getImage',
        getallTrackDetail: 'getallTrackDetail',
        getotherFlag: 'getotherFlag'
      })
    },
    computed: {
    },
    mounted() {
    },
    created() {
      // 照片、标签、最新动态
      this.getZbz()
      // 基本信息
      this.getBase()
      // 通讯、虚拟、交易、资产、企业
      this.getTxjzq()
      // 前科劣迹
      this.getQklj()
      // 行为
      this.getBehavior()
      // 行为
      this.getRelative()
      // 社会关系
      this.getSocial()
      // 轨迹多次伴随
      this.getAlway()
      // 轨迹多次伴随img
      this.getImg()
      // 其他线索
      this.getOther()
    }
  }
</script>
<style src="../../style/person.scss" scoped></style>
<style src="../../assets/icons/iconfont.css" scoped></style>